<!doctype html><html><head><meta charset="UTF-8" />
<title>Math.easing test</title>
<style>
#first {
    background-color: blue;
    position: absolute;
    color: white;
    top: 30px;
    left: 20px;
    width: 400px;
    height: 15px;
    overflow: hidden;
}
#last {
    background-color: blue;
    position: absolute;
    color: white;
    top: 410px;
    left: 20px;
    width: 400px;
    height: 15px;
    overflow: hidden;
}
.box {
    background-color: skyblue;
    position: absolute;
    width: 100px;
    height: 15px;
    overflow: hidden;
}
</style>
<script src="../../src/base.js"></script>
<script>
var offY = 50, time = 800;
var easing = ("linear,inquad,outquad,inoutquad,incubic,outcubic,inoutcubic," +
              "outincubic,inquart,outquart,inoutquart,outinquart,inback," +
              "outback,inoutback,outinback,inbounce,outbounce").split(",");

function boot() {
    function creator(ezfn, i) {
        var node = document.createElement("div");
        var textNode = document.createTextNode(ezfn);

        textNode.textContent = ezfn;

        node.className = "box";
        node.title = ezfn;
        node.style.top = (offY + i * 20) + "px";
        node.style.left = "20px";
        node.style.width = "100px";

        node.addEventListener("mouseover", function(evt) {
            mm.anime({
                width: { a: 100, b: 400, easing: Math[ezfn], time: time }
            }, function(result) {
                node.style.width = (result.width | 0) + "px";
            }, function(init) {
                if (!init) {
                    mm.anime({
                        width: { a: 400, b: 100, easing: Math[ezfn], time: time, delay: 400 }
                    }, function(result) {
                        node.style.width = (result.width | 0) + "px";
                    });
                }
            });
        }, false);

        node.addEventListener("mouseout", function(evt) {
        }, false);

        node.appendChild(textNode);
        document.body.appendChild(node);
    }
    mm.each(easing, creator);
}

window.onload = boot;
</script>
</head><body>
<div id="first">base width</div>
<div id="last">base width</div>
</body></html>
